<template>
    <div class="btn-public btn-gray" 
        :style="btnStyle"
        :class="disabledData ? 'btn-gray' : 'btn-yellow'" 
        @click='btnClick'>
        <slot></slot>
    </div>
</template>
<script>
export default {
  data() {
    return {
      disabledData: this.disabled,
      btnClassData: this.btnClass
    };
  },
  props: {
    btnStyle: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    disabled(value) {
      this.disabledData = value;
    },
    btnClass(value) {
      this.btnClassData = value;
    }
  },
  methods: {
    btnClick() {
      if (this.disabledData) {
        return false
      }
      this.$emit("btn-click");
    }
  }
};
</script>
<style lang="less" scoped>
.btn-public {
  width: 89.4%;
  height: 3.25rem;
  border-radius: 8px;
  color: #ffffff;
  line-height: 3.25rem;
  text-align: center;
  margin: 0 auto;
  font-size: 1rem
}
</style>

